<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue-v2.6.14.js"></script>
</head>
<body>
<div id="app1">
    <model1></model1>
    <model1></model1>
    <model1></model1>
    <model1></model1>
</div>
<div id="app2">
    <model1></model1>
    <model1></model1>
    <model1></model1>
</div>


</body>
<script type="text/javascript">


    // Vue.component("model1",{
    //
    //     template: "<div><input type='text' v-model='value'><button @click='clickMe'>点我</button></div>",
    //     data: function(){
    //         return {
    //              value : 0
    //         }
    //     },
    //     methods: {
    //         clickMe() {
    //             this.value = this.value + 1;
    //         }
    //     }
    // });

    new Vue({
        el: "#app1",
        components :{
            "model1": {
                template: "<div><input type='text' v-model='value'><button @click='clickMe'>点我</button></div>",
                data: function(){
                    return {
                        value : 0
                    }
                },
                methods: {
                    clickMe() {
                        this.value = this.value + 1;
                    }
                }
            }
        }
    })
    new Vue({
        el: "#app2"
    });
</script>


</html>